<template>
  <div class="h-full flex flex-col">
    <div class="flex-1">
      <el-menu class="h-full" router :default-active="defaultPath">
        <el-menu-item index="/">
          <el-icon><icon-menu /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/track">
          <el-icon><icon-menu /></el-icon>
          <span>模型列表</span>
        </el-menu-item>
        <el-menu-item index="/identify">
          <el-icon><icon-menu /></el-icon>
          <span>测试识别</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div>
      <div
        class="flex items-center p-4 bg-gray-50 border border-gray-200 rounded-md"
      >
        <img
          src="https://www.gravatar.com/avatar?d=identicon"
          alt="User Avatar"
          class="w-12 h-12 rounded-full mr-4"
        />
        <div class="flex-1">
          <el-dropdown @command="handleCommand" trigger="click">
            <div class="text-lg font-semibold">333</div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Plus">设置</el-dropdown-item>
                <el-dropdown-item command="logout" :icon="CircleCheck"
                  >退出</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store/user";
import { Menu as IconMenu } from "@element-plus/icons-vue";
import { CircleCheck, Plus } from "@element-plus/icons-vue";

const userStore = useUserStore();
const route = useRoute();
const router = useRouter();

const defaultPath = route.path;

async function handleCommand(name: string) {
  if (name === "logout") {
    await userStore.logout();
    ElMessage.success("退出成功");
    router.replace("/login");
  }
}
</script>
